<template>
  <div class="access flex_center">
    <div class="title">
      <span>最新内容</span>
      <span>ACCESS</span>
    </div>
    <div class="photos">
        <div class="imgbox">
            <div class="mask"></div>
            <img src="../assets/img1.jpg" alt="">
        </div>
        <div class="imgbox">
             <div class="mask"></div>
            <img src="../assets/img2.jpg" alt="">
        </div>
        <div class="imgbox">
             <div class="mask"></div>
            <img src="../assets/img4.jpg" alt="">
        </div>
    </div>
    <div class="content">
        <p>时光匆匆，唯有美食不可错过</p>
        <p>Tme flies，only food can not be missed</p>
        <p style="marginTop:1em">20200317</p>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scope>
.access{
    .photos {
        margin: 2em 2em;
        width: 80%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1em;
        .imgbox{
            position: relative;
            cursor: pointer;
            .mask{
                position: absolute;
                width: 100%;
                height: 100%;
                background: #eee;
                opacity: .5;
            }
            .mask:hover{
                opacity: 0;
            }
        }
    }
    .content{
        text-align: center;
        font-size: .8em;
        line-height: 1.4em;
    }
}
</style>
